
<script setup>
import WkUserSelect from '/src/szcomponent/NewCom/SzDeptUserComp/WkUserSelect/index.vue'
import {setTaskAPI} from '/src/api/task/task.js'

import TaskCreate from '../Create.vue'

import merge from '/src/utils/merge.js'

import {ref,nextTick,getCurrentInstance,computed} from "vue"
import {ElMessage} from "element-plus"


// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus

defineOptions({
  // 任务快捷添加
  name: 'TaskQuickAdd',
})

const props = defineProps({
  // default  hideBorder
  showStyle: {
    type: String,
    default: 'default'
  },
  // 管理业务参数
  params: Object,
  props: Object
})

const emits = defineEmits(['focus','send'])


// 添加
const sendLoading = ref(false)
// 默认闭合
const isUnfold = ref(false)
const sendContent = ref('')
const sendStopTime = ref('')
const mainUser = ref([])
const taskCreateShow = ref(false)
const createAction = ref({
  type: 'save'
})

const DefaultTaskAddProps = {
  relatedObj: {}, // 关联业务信息
  relatedObjIds: {} // 关联业务Ids信息
}

/**
 * 负责人
 */
const createMainUser = computed(() => {
  return mainUser.value && mainUser.value.length ? mainUser.value[0] : null
})


const config = computed(() => {
  return merge({...DefaultTaskAddProps}, props.props || {})
})


/**
 * 任务添加
 */
function inputFocus() {
  emits('focus')
  isUnfold.value = true
  nextTick(() => {
    // this.$refs.input.focus()
    cxt.refs.input.focus()
  })
}

defineExpose({
  inputFocus
})

/**
 * 选择负责人
 */
function selectMainUser(_, dataArray) {
  mainUser.value = dataArray
}



/**
 * 创建任务
 */
function send() {
  if (!sendContent.value.length) {
    // this.$message.error('请填写任务标题')
    ElMessage.error({message: "请填写任务标题"})
  } else {
    sendLoading.value = true
    let params = {
      name: sendContent.value,
      stopTime: sendStopTime.value,
      mainUserId: createMainUser.value ? createMainUser.value.userId : ''
    }
    if (props.params) {
      params = {...params, ...props.params}
    }
    setTaskAPI(params).then(res => {
      sendLoading.value = false
      // this.$message.success('新建成功')
      ElMessage.success({message: "新建成功"})
      resetSendData()
      emits('send')
    }).catch(() => {
      sendLoading.value = false
    })
  }
}

function focusEndTime() {
  cxt.refs.endTime.handleOpen() // 手动开启时间弹窗
}

function resetSendData() {
  sendContent.value = ''
  sendStopTime.value = ''
  mainUser.value = []
  isUnfold.value = false
}

/**
 * 创建成功
 */
function createSuccess() {
  resetSendData()
  emits('send')
}

/**
 * 关闭
 */
function addClose() {
  isUnfold.value = false
}

/**
 * 更多点击
 */
function moreClick() {
  createAction.value = {
    type: 'save',
    data: {
      name: sendContent.value,
      stopTime: sendStopTime.value,
      mainUserId: createMainUser.value ? createMainUser.value.userId : '',
      relatedObj: props.config.relatedObj,
      relatedObjIds: props.config.relatedObjIds
    },
    params: props.params
  }
  taskCreateShow.value = true
}

</script>


<template>
  <div v-loading="sendLoading"
       :class="['add', {
      'unfold': isUnfold,
      'is-close': !isUnfold,
      'hide-border': showStyle === 'hideBorder' && !isUnfold
    }]"
       class="task-quick-add">
    <i v-if="isUnfold" class="wk wk-close" @click="addClose"/>
    <el-input ref="input"
              v-model="sendContent"
              maxlength="100"
              :prefix-icon="isUnfold ? '' : 'el-icon-plus'"
              class="input"
              placeholder="添加任务"
              @focus="inputFocus"/>

    <flexbox class="add-info">
      <el-date-picker ref="endTime" :class="{ 'no-time-top': !sendStopTime }"
                      v-model="sendStopTime"
                      type="date"
                      value-format="YYYY-MM-DD"
                      placeholder=""
                      @focus="focusEndTime"/>
      <WkUserSelect :value="mainUser ? mainUser.userId : ''"
                      radio
                      style="height: auto !important;"
                      @change="selectMainUser">
        <template v-slot:reference>
          <div class="select-user">
            <i v-if="!createMainUser" class="wk wk-persons add-info__btn add-info__interval"/>
            <xr-avatar v-else
                       :name="createMainUser.realname"
                       :size="24"
                       :src="createMainUser.img"
                       class="add-info__interval"/>
          </div>
        </template>
      </WkUserSelect>

      <i class="el-icon-more add-info__btn add-info__interval" @click="moreClick"/>
    </flexbox>

    <el-button v-debounce="send" v-if="showStyle === 'hideBorder'" class="send-btn" type="primary">
      保存
    </el-button>
    <el-button v-debounce="send" v-else class="send-btn" type="primary">发布</el-button>

    <TaskCreate v-if="taskCreateShow" :action="createAction" @save="createSuccess" @close="taskCreateShow = false"/>
  </div>
</template>

<style lang="scss" scoped>
// 添加
.add {
  position: relative;
  background-color: white;
  border-radius: $xr-border-radius-base;
  border: 1px solid $xr-border-line-color;
  padding: 5px;

  .input {
    width: calc(100% - 50px);

    :deep(.el-input__inner) {
      border: none;
    }
  }

  .add-info {
    padding: 0 8px;

    .el-date-editor {
      width: 110px;
      font-size: 12px;

      :deep(.el-input__prefix) {
        left: 0;

        .el-icon-date {
          width: 24px;
          line-height: 24px;
        }
      }

      :deep(.el-input__suffix) {
        top: -4px;
      }

      :deep(.el-input__inner) {
        border-radius: 12px;
        line-height: 24px;
        height: 24px;
        padding-left: 20px;
        padding-right: 5px;
        border: none;
        background-color: #f0f0f0;
      }
    }

    &__btn {
      border: 1px solid #e6e6e6;
      color: #c0c4cc;
      width: 24px;
      height: 24px;
      border-radius: 12px;
      display: inline-block;
      text-align: center;
      line-height: 24px;
      font-size: 12px;
      cursor: pointer;
    }

    &__btn:hover {
      border-color: $xr-color-primary;
      color: $xr-color-primary;
    }

    &__interval {
      margin-left: 8px;
    }

    .no-time-top {
      width: 24px;
      cursor: pointer;

      :deep(.el-input__inner) {
        background-color: white;
        border: 1px solid $xr-border-line-color;
        padding: 0;
        line-height: 24px;
        height: 24px;
      }
    }

    .no-time-top:hover {
      :deep(.el-input__inner) {
        border-color: $xr-color-primary;
      }

      :deep(.el-icon-date) {
        color: $xr-color-primary;
      }
    }
  }

  // 无边框风格
  &.hide-border {
    border-color: white;
    padding: 0;

    .send-btn {
      display: none;
    }

    :deep(.el-input__icon) {
      color: $xr-color-primary;
    }
  }

  &.hide-border:hover {
    border-color: white !important;
  }
}

.add.is-close {
  .add-info {
    display: none;
  }
}

// 闭合
.add.is-close:hover {
  cursor: pointer;
  border-color: #c0c4cc;

  .input {
    :deep(.el-icon-plus) {
      color: $xr-color-primary;
    }
  }
}

// 展开
.add.unfold {
  .input {
    margin-bottom: 15px;
  }
}

.send-btn {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 5px;

  :deep(i) {
    font-size: 13px;
  }
}

// 选择负责人
.select-user {
  cursor: pointer;
  display: inline-block;
}

// 关闭按钮
.wk-close {
  border: 0;
  color: #d9d9d9;
  font-size: 22px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 4px;
  transform: scale(0.8);
}

.wk-close:hover {
  color: #2362fb;
}
</style>
